<template>
	<view>
		<view class="top-bg">
			<image :src="topBannerImgUrl" mode="scaleToFill"></image>
		</view>

		<view class="content">

			<view class="item">
				<text class="top-title">业务查询</text>

				<view class="top-linear">
					<view class="myorder" v-for="(item, index) in business" :key="index" @click="queryItemClick(item)">
						<image :src="item.dictImg" mode="scaleToFill"></image>
						<text>{{item.dictValue}}</text>
					</view>
				</view>
			</view>

			<view class="item afterservice" @click="afterService()">
				<image class="afterimg" :src="afterServiceImgUrl" mode="scaleToFill"></image>

				<view class="after-text">
					<text style="color: #333333;font-weight: bold;">售后保障服务</text>
					<text style="color: #A7A7A7;font-size: 24upx;margin-top: 16upx;">我们将竭诚为您提供 优质的售后保障服务</text>
				</view>
			</view>

			<view class="item">
				<text class="top-title">客服热线与意见反馈</text>

				<view class="service-lienar">
					<view class="service-phone" :class="'service-phone-active'+index" v-for="(item, index) in feedback"
						:key="index" @click="phoneItemClick(item)">

						<button style="position: absolute;width: 180upx;height: 200upx;opacity: 0;" open-type='contact'
							v-if="1==index">

						</button>

						<text>{{item.dictValue}}</text>
						<image :src="item.dictImg" mode="scaleToFill"></image>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		customerservice,
		hotline,
		subscribeList
	} from '../../../common/api.js';

	export default {
		data() {
			return {
				baseImg: this.baseImageUrl,
				// topBannerImgUrl: '../../../static/server/banner4.png',
				// afterServiceImgUrl: '../../../static/server/feedback4.png',
				topBannerImgUrl: '',
				afterServiceImgUrl: '',
				business: [
					// 	{
					// 	dictImg: '../../../static/server/business1.png',
					// 	dictValue: '我的订单',
					// 	dictCode: 1,
					// }, {
					// 	dictImg: '../../../static/server/business2.png',
					// 	dictValue: '我的车辆',
					// 	dictCode: 2,
					// }, {
					// 	dictImg: '../../../static/server/business3.png',
					// 	dictValue: '欠款情况',
					// 	dictCode: 3,
					// }, {
					// 	dictImg: '../../../static/server/business4.png',
					// 	dictValue: '违章情况',
					// 	dictCode: 4,
					// },
				],
				feedback: [
					// 	{
					// 	dictImg: '../../../static/server/feedback1.png',
					// 	dictValue: '意见反馈',
					// 	dictCode: 1,
					// }, {
					// 	dictImg: '../../../static/server/feedback3.png',
					// 	dictValue: '在线客服',
					// 	dictCode: 2,
					// }, {
					// 	dictImg: '../../../static/server/feedback2.png',
					// 	dictValue: '客服热线',
					// 	dictCode: 3,
					// },
				],
				hotLine: '', // 电话
				orderSub: [],
				carSub: [],
				ownSub: [],
				illegalSub: []
			}
		},
		onLoad() {
			this.getData();
			this.getSub();
		},

		methods: {
			getData() {
				customerservice().then(res => {
					this.topBannerImgUrl = this.baseImg + res.topBannerImgUrl;
					this.afterServiceImgUrl = this.baseImg + res.afterServiceImgUrl;
					this.business = res.businessList;
					this.feedback = res.feedbackList;

					this.business = this.addpre(this.business);
					this.feedback = this.addpre(this.feedback);
					console.log('feedback', this.feedback);
				})

				hotline().then(res => {
					this.hotLine = res;
				})
			},

			getSub() {
				subscribeList({
					params: {
						type: 3
					}
				}).then(res => {
					this.orderSub = res;
				})

				subscribeList({
					params: {
						type: 4
					}
				}).then(res => {
					this.carSub = res;
				})

				subscribeList({
					params: {
						type: 1
					}
				}).then(res => {
					this.illegalSub = res;
				})

				subscribeList({
					params: {
						type: 5
					}
				}).then(res => {
					this.ownSub = res;
				})
			},

			addpre(list) {
				if (!uni.$u.test.isEmpty(list)) {
					list = list.map(
						(item) => {
							item.dictImg = this.baseImageUrl + item.dictImg;
							return item;
						}
					)
				}
				return list;
			},

			queryItemClick(item) {
				switch (item.dictCode) {
					case '1':

						uni.requestSubscribeMessage({
							tmplIds: this.orderSub,
							success(res) {
								// if (res[tmplIds] == 'reject') {
								// 	console.log('用户取消接受此类消息通知')
								// }
								uni.navigateTo({
									url: '../car-orderlist/car-orderlist'
								})
							},
							fail(e) {
								uni.navigateTo({
									url: '../car-orderlist/car-orderlist'
								})
								console.log('requestSubscribeMessage', e.errMsg)
								// wx.showToast({
								// 	title: e.errMsg,
								// 	icon: 'none'
								// })
							}
						})


						break;
					case '2':

						uni.requestSubscribeMessage({
							tmplIds: this.carSub,
							success(res) {
								// if (res[tmplIds] == 'reject') {
								// 	console.log('用户取消接受此类消息通知')
								// }
								uni.navigateTo({
									url: '../carownerservice/mycar/mycar'
								})
							},
							fail(e) {
								uni.navigateTo({
									url: '../carownerservice/mycar/mycar'
								})
								console.log('requestSubscribeMessage', e.errMsg)
								// wx.showToast({
								// 	title: e.errMsg,
								// 	icon: 'none'
								// })
							}
						})


						break;
					case '3':

						uni.requestSubscribeMessage({
							tmplIds: this.ownSub,
							success(res) {
								// if (res[tmplIds] == 'reject') {
								// 	console.log('用户取消接受此类消息通知')
								// }

								uni.navigateTo({
									url: '../carownerservice/paycost/paycost'
								})
							},
							fail(e) {

								uni.navigateTo({
									url: '../carownerservice/paycost/paycost'
								})
								console.log('requestSubscribeMessage', e.errMsg)
								// wx.showToast({
								// 	title: e.errMsg,
								// 	icon: 'none'
								// })
							}
						})

						break;
					case '4':

						uni.requestSubscribeMessage({
							tmplIds: this.illegalSub,
							success(res) {
								// if (res[tmplIds] == 'reject') {
								// 	console.log('用户取消接受此类消息通知')
								// }

								uni.navigateTo({
									url: '../carownerservice/illegalwarn/illegalwarn'
								})
							},
							fail(e) {

								uni.navigateTo({
									url: '../carownerservice/illegalwarn/illegalwarn'
								})
								console.log('requestSubscribeMessage', e.errMsg)
								// wx.showToast({
								// 	title: e.errMsg,
								// 	icon: 'none'
								// })
							}
						})

						break;
				}
			},

			afterService() {
				console.log('跳转');
				uni.navigateTo({
					url: './afterservice'
				})
			},

			phoneItemClick(item) {
				switch (item.dictCode) {
					case '1':
						uni.navigateTo({
							url: './feedback'
						})
						break;
					case '2':
						//不用处理，直接跳会话
						break;
					case '3':
						this.makehotLine()
						break;
				}
			},

			makehotLine() {
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.hotLine,
					success() {
						// _self.onClose()
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		image {
			width: 100%;
			height: 220upx;
		}
	}

	.content {
		position: relative;
		top: -60upx;
		height: 200upx;
		margin: 0 10upx;
		@include flex(column);


		.top-title {
			margin-top: 24upx;
			margin-left: 24upx;
			color: $black33;
			font-weight: bold;
		}

		.top-linear {
			@include flex;
			justify-content: space-between;
			margin: 30upx 0;

			.myorder {
				@include flex(column);
				align-items: center;
				justify-content: center;
				flex-grow: 1;


				image {
					width: 80upx;
					height: 80upx;
					margin-bottom: 10upx;
				}

				text {
					font-size: 24upx;
					color: $black33;
				}
			}

		}

		.service-lienar {
			@include flex;
			justify-content: space-evenly;
			margin: 30upx 0;

			.service-phone {
				@include flex(column);
				align-items: center;
				justify-content: center;
				width: 200upx;
				height: 220upx;
				border-radius: 8rpx;
				position: relative;

				text {
					font-size: 32upx;
					margin-bottom: 20upx;
				}

				image {
					width: 90upx;
					height: 95upx;
				}

			}
		}

		.afterservice {
			@include flex;
			align-items: center;
			padding: 20upx;
			margin-top: 0;
			margin-bottom: 0;

			.afterimg {
				width: 100upx;
				height: 100upx;

			}

			.after-text {
				@include flex(column);
				justify-content: space-between;
				margin-left: 20upx;

			}
		}

		.service-phone-active0 {
			background: linear-gradient(to bottom, #FBFDFB 10%, #F4FAF4 50%, #EBF6EC);

			text {
				color: #43a047;
			}
		}

		.service-phone-active1 {
			background: linear-gradient(to bottom, #FFFDFC, #FEF6F1, #FDEDE3);

			text {
				color: #E66B0D;
			}
		}

		.service-phone-active2 {
			background: linear-gradient(to bottom, #FFFCFC 10%, #FEF1F1 50%, #FDE5E4);

			text {
				color: #EE420C;
			}
		}
	}
</style>
